import { reactControl, ReactViewControl, ReactViewState, ReactView } from "pao-aop-client";

import React from "react";

import { addon, Ref, getObject, log } from "pao-aop";
import { ISingleProductSignService, SingleProductSign } from "src/models/singleProductSign";
import { IProductTypeService, ProductType } from "src/models/productType";
import { match } from "react-router";
import { CategorySign } from "src/models/categorySign";
import { CompanySign, ICompanyTemplateSignService } from "src/models/companySign";
import { IndustryInternetSignAppStorage } from "../../app/appStorage";
import { NTModal } from "src/projects/industryInternetSign/components/modal";
import { SignPreview } from "src/projects/industryInternetSign/components/sign-preview";
import { Button, message, Modal } from "antd";
import { build_qrCode, SIGN_ID, ROUTE_PATH, UPLOAD_URL, beforeUpload, isPermission } from "../../app/util-tool";
// import zh_CN from 'antd/lib/locale-provider/zh_CN';
import FormCreator, { InputType } from "src/business/components/form-creator";
import { User } from "src/business/models/user";
import { GetFieldDecoratorOptions, FormProps } from "antd/lib/form/Form";
import { FormItemProps } from "antd/lib/form";
import { PermissionList } from "../../app/permission";
import { NTOperationTable } from "src/business/components/operation-table";
import { Stencil, StencilCondition, IStencilService } from "src/models/stencil";
import NTDivStyle from "src/business/style-components/div-style";
import { ModuleSort } from "src/models/baseSign";
import RadioGroup from "antd/lib/radio/group";
/** 获取表单props属性 */
let formProps: any;
/**
 * 组件：更改单品标识视图控件状态
 */
export interface ChangeSingleProductViewState extends ReactViewState {
    /** 单品标识数据源 */
    data?: SingleProductSign;
    /** 产品类型数据集合 */
    product_data?: ProductType[];
    /** 品类标识列表 */
    category_list?: CategorySign[];
    /** 企业标识信息对象 */
    company_sign?: CompanySign;
    /** modal显示判断 */
    visible?: boolean;
    /** 二维码显示判断 */
    showCode?: boolean;
    /** 地址 */
    src?: string;
    /** 用于提交的对象 */
    submit_data?: SingleProductSign;
    /** 用于预览界面的对象 */
    preview_data?: any;
    /** 用户信息 */
    user_data?: User;
    /** 标识输入框是否可编辑 */
    check_code: boolean;
    /** 标识码显示前缀 */
    before_handle_code?: string;
    /** 滚动条 */
    loading?: boolean;
    /** 模版modal显示判断 */
    stencil_visible?: boolean;
    /** 模版列表数据源 */
    data_source?: Stencil[];
    /** 当前第几页 */
    page?: number;
    /** 当前每页数 */
    pageSize?: number;
    /** 数据总条数 */
    total_data?: number;
    /** 选中模版数据集合 */
    stencil_value?: any[];
    /** 企业标识列表 */
    companyOption: any[];
    /** 企业排序复选框数值 */
    companyRadioGroupValue?: number;
    /** 品类排序复选框数值 */
    categoryRadioGroupValue?: number;
    /** 单品排序复选框数值 */
    singleRadioGroupValue?: number;
}
/**
 * 组件：更改单品标识视图控件
 * 控制更改单品标识视图控件
 */
export class ChangeSingleProductView extends ReactView<ChangeSingleProductViewControl, ChangeSingleProductViewState> {
    private columns_data_source = [{
        title: '模版名称',
        dataIndex: 'stencil_name',
        key: 'stencil_name',
        width: 500
    }, {
        title: '创建时间',
        dataIndex: 'create_date',
        key: 'create_date',
        width: 150,
    }];
    constructor(props: ChangeSingleProductViewControl) {
        super(props);
        this.state = {
            data: {},
            product_data: [],
            category_list: [],
            company_sign: {},
            src: '',
            check_code: false,
            before_handle_code: '',
            companyOption: [],
            companyRadioGroupValue: 3,
            categoryRadioGroupValue: 1,
            singleRadioGroupValue: 2
        };
    }
    componentDidMount() {
        this.setState({
            loading: true
        });
        this.querySelectList()
            .then(() => { })
            .catch(error => {
                log("SelectList", error.message);
            });
        let { [SIGN_ID]: id } = this.props.match!.params;
        if (id) {
            this.queryData(id)
                .then(() => {
                    this.setState({
                        loading: false
                    });
                })
                .catch(error => {
                    this.setState({
                        loading: false
                    });
                    log("ChangeSingleProductViewControl", error.message);
                });
        } else {
            let company_sign = IndustryInternetSignAppStorage.getCurrentCompanySign();
            this.setState({
                company_sign: company_sign ? company_sign : {},
                check_code: false,
                loading: false
            });
        }
    }
    /** 分页回调事件 */
    pageOnCick = (contents: any) => {
        this.setState({
            page: contents,
            loading: true
        });
        this.queryList({}, contents, this.state.pageSize!)
            .then(() => {
                this.setState({
                    loading: false
                });
            })
            .catch(error => {
                this.setState({
                    loading: false
                });
                log("stencilViewControl-pageOnCick", error.message);
            });
    }
    /** 改变分页数量回调事件 */
    showSizeChange = (current: number, pageSize: number) => {
        console.log('current: ' + current + 'pageSize: ' + pageSize);
        this.setState({
            pageSize: pageSize,
            loading: true
        });
        this.queryList({}, 1, pageSize)
            .then(() => {
                this.setState({
                    loading: false
                });
            })
            .catch(error => {
                this.setState({
                    loading: false
                });
                log("stencilViewControl-showSizeChange", error.message);
            });
    }
    // 查询列表信息
    async queryList(condition: StencilCondition, page: number, count: number) {
        const data = await this.stencilService!()!.get_stencil_list!(condition, page, count)!;
        this.setState({
            total_data: data ? data!.total : 0, // 应当取接口返回的总数
            data_source: data ? data!.result : []
        });
    }
    // 初始化模版服务
    stencilService?() {
        return getObject(this.props.stencilService_Fac!);
    }
    /**
     * 引用模版按钮方法
     */
    select_stencil = () => {
        this.setState({
            // stencil_value: [],
            stencil_visible: true,
            loading: true
        });
        let condition: StencilCondition = {};
        this.queryList(condition, 1, 10)
            .then(() => {
                this.setState({
                    loading: false
                });
            })
            .catch(error => {
                this.setState({
                    loading: false
                });
                log("stencilViewControl", error.message);
            });
    }

    /** 模版选择框确定回调方法 */
    handleOk = (e: any) => {
        // 把已经选中的自定义属性列表放入data中
        let data = this.state.data;

        data!.custom_attribute = this.state.stencil_value!;
        console.log('最终值', this.state.stencil_value);
        this.setState({
            stencil_visible: false,
            data
        });
        // 设置自定义控件的值
        formProps.setFieldsValue({
            custom_attribute: data!.custom_attribute
        });
    }

    /** 模版选择框取消回调方法 */
    handleCancel = (e: any) => {
        this.setState({
            stencil_visible: false,
        });
    }
    /** 行选中回调 */
    private handleRowSelect = (e: Stencil[]) => {
        let stencil_value: Stencil[] = [];
        if (e.length > 0) {
            for (let i = 0; i < e.length; i++) {
                stencil_value = stencil_value.concat(e[i].stencil_value!);
            }
        }
        this.setState({
            stencil_value: stencil_value,
        });
    }
    // 查询品类标识列表信息
    async querySelectList() {
        let user_data = IndustryInternetSignAppStorage.getCurrentUser();
        let company_sign = IndustryInternetSignAppStorage.getCurrentCompanySign();
        const category_list = await this.companyTemplateSignServices!()!.get_single_category_list!(user_data[0] ? user_data[0].account : "")!;
        const product_data = await this.productTypeService!()!.get_product_type_list!()!;
        /** 初始化企业列表 */
        let companyOption = [{ id: ' ', value: '无' }];
        if (company_sign) {
            companyOption.push({ id: company_sign!.handle_code!, value: company_sign!.handle_name! });
        }
        this.setState({
            product_data: product_data!.result,
            category_list: category_list ? category_list!.result : [],
            // company_sign: company_sign ? company_sign : {},
            user_data: user_data[0], // 以后梦晴改成对象后，把0去掉
            before_handle_code: (user_data[0] ? user_data[0].account : "") + '/',
            companyOption: companyOption
        });
    }

    // 查询详情信息
    async queryData(id: string) {
        const data = await this.singleProductSignService!()!.get_single!(id)!;
        let company_sign = {};
        if (data!.company_handle_code && data!.company_handle_name) {
            company_sign = { handle_code: data!.company_handle_code, handle_name: data!.company_handle_name };
        }
        this.setState({
            data,
            check_code: true,
            before_handle_code: data ? data!.handle_code!.slice(0, data!.handle_code!.indexOf('/') + 1) : this.state.before_handle_code,
            company_sign,
            // companyRadioGroupValue: data && data!.module_sort && data!.module_sort!.company && data!.module_sort!.company!.show_sort ? data!.module_sort!.company!.show_sort : this.state.companyRadioGroupValue,
            // categoryRadioGroupValue: data && data!.module_sort && data!.module_sort!.category && data!.module_sort!.category!.show_sort ? data!.module_sort!.category!.show_sort : this.state.categoryRadioGroupValue,
            // singleRadioGroupValue: data && data!.module_sort && data!.module_sort!.single && data!.module_sort!.single!.show_sort ? data!.module_sort!.single!.show_sort : this.state.singleRadioGroupValue
        });
    }

    /**
     * 上传base64，返回url地址
     */
    async upload_base64(code: string, base64: string) {
        let new_code = code.replace('/', '-');
        const src = await this.companyTemplateSignServices!()!.upload_rc_code!(new_code, base64)!;
        this.setState({ src: '/' + src.url });
    }
    /**
     * 生成二维码图片，返回url地址
     */
    async generateIdentifierQRCode(code: string, data: SingleProductSign) {
        const src = await this.companyTemplateSignServices!()!.get_qr_code!(code)!;
        this.setState({ src: '/' + src.url });
        data!.rc_code = '/' + src.url;
        let { [SIGN_ID]: id } = this.props.match!.params;
        if (id) {
            data.id = id;
        }
        let result = await this.singleProductSignService!()!.insert!(data)!;
        if (result) {
            this.setState({
                showCode: true
            });
            message.info('保存成功');
        } else {
            message.info('保存失败');
        }
    }

    /**
     * 生成二维码base64
     */
    createCode(code: string) {
        let thiz = this;
        build_qrCode(code, function (val: any) {
            // let src = val;
            // thiz.setState({ src });
            thiz.upload_base64(code, val)
                .then(() => { })
                .catch(error => {
                    log("upload_base64", error.message);
                });
        });
    }
    /** 提交并生成二维码方法 */
    save_build_qrCode = () => {
        this.setState({
            loading: true
        });
        let data = this.state.submit_data;
        this.generateIdentifierQRCode(data!.handle_code!, data!)
            .then(() => {
                this.setState({
                    loading: false
                });
            })
            .catch(error => {
                this.setState({ loading: false });
                log("generateIdentifierQRCode", error.message);
                message.info("保存失败" + error.message);
            });
    }
    /** 提交按钮 */
    onClickSubmit = (e: any, data: SingleProductSign) => {
        // TODO 转换数据结构，拼装analysSin，显示在预览页面
        console.log('data', data);
        data!.handle_code = (this.state.before_handle_code ? this.state.before_handle_code : "") + data!.handle_code;
        data!.category_handle_name = data!.category_handle_name!['label'];
        data!.company_handle_name = data!.company_handle_name!['label'];
        // 如果企业标识选择了“无”，则不需要上传企业标识信息
        if (data!.company_handle_name === '无') {
            data.company_handle_name = undefined;
            data.company_handle_code = undefined;
        }
        if (!data!.handle_name) {
            data!.handle_name = ' ';
        }
        // this.createCode(data!.handle_code);

        this.insertPreview(data!)
            .then(() => { })
            .catch(error => {
                log("insert_preview", error.message);
            });
    }
    /** 新增排序服务调用 */
    async insertPreview(data: SingleProductSign) {
        let module_sort: ModuleSort = {};
        module_sort.company = {
            is_show: true,
            show_sort: this.state.companyRadioGroupValue// data.company_show_sort
        };
        // module_sort.category = {
        //     is_show: true,
        //     show_sort: this.state.categoryRadioGroupValue// data.category_show_sort
        // };
        // module_sort.single = {
        //     is_show: true,
        //     show_sort: this.state.singleRadioGroupValue// data.single_show_sort
        // };
        // data.company_is_show = undefined;
        // data.company_show_sort = undefined;
        // data.category_is_show = undefined;
        // data.category_show_sort = undefined;
        // data.single_is_show = undefined;
        // data.single_show_sort = undefined;
        let result = await this.singleProductSignService!()!.insert_preview!(data)!;
        result.module_sort = module_sort;
        // data.module_sort = module_sort;
        this.setState({
            visible: !this.state.visible,
            submit_data: data,
            preview_data: result
        });
    }

    /** 返回按钮 */
    onClickBack = () => {
        this.props.history!.push(ROUTE_PATH.singleProductView);
    }
    /** 品类类别选择框回调 */
    onClickCategory = (e: any) => {
        // console.log(e.label);
        let data = this.state.data;
        data!.category_handle_code = e.key;
        this.setState({
            data: data
        });
    }
    /** 企业标识选择框回调 */
    onClickCompany = (e: any) => {
        let company_sign = this.state.company_sign;
        company_sign!.handle_code = e.key;
        this.setState({
            company_sign: company_sign
        });
    }
    // 初始化单品服务
    singleProductSignService?() {
        return getObject(this.props.singleProductSignService_Fac!);
    }
    // 初始化产品类型服务
    productTypeService?() {
        return getObject(this.props.productTypeService_Fac!);
    }

    // 初始化企业服务
    companyTemplateSignServices?() {
        return getObject(this.props.companyTemplateSignService_fac!);
    }

    /**
     * 企业复选按钮方法
     */
    onChangeCompanyRadioGroup = (e: any) => {
        this.setState({
            companyRadioGroupValue: e.target.value
        });
    }

    /**
     * 品类复选按钮方法
     */
    onChangeCategoryRadioGroup = (e: any) => {
        this.setState({
            categoryRadioGroupValue: e.target.value
        });
    }

    /**
     * 单品复选按钮方法
     */
    onChangeSingleRadioGroup = (e: any) => {
        this.setState({
            singleRadioGroupValue: e.target.value
        });
    }
    render() {
        const redeirect = isPermission ? isPermission!(PermissionList.SingleProduct_Select) : undefined;
        if (redeirect) {
            return redeirect;
        }
        let { data, product_data, category_list, company_sign, before_handle_code, companyOption } = this.state;
        console.log('companyOption', companyOption);
        let selectOption: any[] = [];
        if (product_data) {
            product_data!.map((item, idx) => {
                selectOption.push({ id: item.id + '', value: item.product_type_name });
            });
        }
        let categoryOption: any[] = [];
        if (category_list && category_list.length > 0) {
            category_list!.map((item, idx) => {
                categoryOption.push({ id: item.handle_code + '', value: item.handle_name });
            });
        }
        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 4 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 10 },
            },
        };
        const content = (
            <div>
                <img style={{ width: '850px' }} src={require('../../img/cp_picture.jpg')} />
            </div>
        );
        const optionRadioGroup = [{ label: '第一', value: 1 }, { label: '第二', value: 2 }, { label: '第三', value: 3 }];
        // 企业排序复选框
        const companyRadioGroup = (
            <div>展示排序：
                <RadioGroup options={optionRadioGroup} onChange={this.onChangeCompanyRadioGroup} value={this.state.companyRadioGroupValue} />
            </div>
        );
        // 品类排序复选框
        const categoryRadioGroup = (
            <div>展示排序：
                <RadioGroup options={optionRadioGroup} onChange={this.onChangeCategoryRadioGroup} value={this.state.categoryRadioGroupValue} />
            </div>
        );
        // 单品排序复选框
        const singleRadioGroup = (
            <div>展示排序：
                <RadioGroup options={optionRadioGroup} onChange={this.onChangeSingleRadioGroup} value={this.state.singleRadioGroupValue} />
            </div>
        );
        let edit_props = {
            loading: this.state.loading,
            form_props: {
                hideRequiredMark: true
            } as FormProps,
            form_items_props: [
                {
                    title: "已引用企业标识",
                    need_card: true,
                    extra: companyRadioGroup,
                    input_props: [
                        {
                            type: InputType.select,
                            label: "企业标识名称",
                            option: {
                                data: companyOption,
                                placeholder: "请选择企业标识名称",
                                onChange: this.onClickCompany,
                                labelInValue: true
                            },
                            field_decorator_option: {
                                // rules: [{ required: true, message: "请输入正文内容" }],
                                // initialValue: data && data!.company_handle_name ? data!.company_handle_name : company_sign!.handle_name,// "佛山市XX公司"，新增的时候应该取当前用户对应的企业信息company_sign!.handle_name,
                                initialValue: company_sign && company_sign.handle_code && company_sign.handle_name ? { 'key': company_sign!.handle_code, 'label': company_sign!.handle_name } : undefined,
                            } as GetFieldDecoratorOptions,
                            decorator_id: "company_handle_name"
                        },
                        {
                            type: InputType.input_uneditable,
                            label: "企业标识",
                            field_decorator_option: {
                                // rules: [{ required: true, message: "请输入正文内容" }],
                                initialValue: company_sign && company_sign!.handle_code ? company_sign!.handle_code : "",
                            } as GetFieldDecoratorOptions,
                            decorator_id: "company_handle_code"
                        },
                        // {
                        //     type: InputType.radioGroup,
                        //     label: "是否展示",
                        //     field_decorator_option: {
                        //         // rules: [{ required: true, message: "请输入正文内容" }],
                        //         initialValue: data && data!.module_sort && data!.module_sort!.company ? data!.module_sort!.company!.is_show : true,
                        //     } as GetFieldDecoratorOptions,
                        //     decorator_id: "company_is_show",
                        //     option: {
                        //         options: [
                        //             { label: '展示', value: true },
                        //             { label: '隐藏', value: false }
                        //         ],
                        //     }
                        // },
                        // {
                        //     type: InputType.radioGroup,
                        //     label: "展示排序",
                        //     field_decorator_option: {
                        //         // rules: [{ required: true, message: "请输入正文内容" }],
                        //         initialValue: data && data!.module_sort && data!.module_sort!.company && data!.module_sort!.company!.show_sort ? data!.module_sort!.company!.show_sort : 3,
                        //     } as GetFieldDecoratorOptions,
                        //     decorator_id: "company_show_sort",
                        //     option: {
                        //         options: [
                        //             { label: '第一', value: 1 },
                        //             { label: '第二', value: 2 },
                        //             { label: '第三', value: 3 },
                        //         ],
                        //     }
                        // }
                    ]
                },
                {
                    title: "引用品类标识",
                    need_card: true,
                    extra: categoryRadioGroup,
                    input_props: [
                        {
                            type: InputType.select,
                            label: "品类标识名称",
                            decorator_id: "category_handle_name",
                            option: {
                                data: categoryOption,
                                placeholder: "请选择品类标识",
                                onChange: this.onClickCategory,
                                labelInValue: true
                            },
                            field_decorator_option: {
                                // rules: [{ required: true, message: "请选择品类模版名称" }],
                                initialValue: data ? { 'key': data!.category_handle_code, 'label': data!.category_handle_name } : undefined,
                            } as GetFieldDecoratorOptions
                        },
                        {
                            type: InputType.input_uneditable,
                            label: "品类标识",
                            decorator_id: "category_handle_code",
                            field_decorator_option: {
                                // rules: [{ required: true, message: "请输入品类模版标识" }],
                                initialValue: data ? data!.category_handle_code : ""
                            } as GetFieldDecoratorOptions,
                            option: {
                                placeholder: "请选择品类标识",
                            }
                        },
                        // {
                        //     type: InputType.radioGroup,
                        //     label: "是否展示",
                        //     field_decorator_option: {
                        //         // rules: [{ required: true, message: "请输入正文内容" }],
                        //         initialValue: data && data!.module_sort && data!.module_sort!.category ? data!.module_sort!.category!.is_show : true,
                        //     } as GetFieldDecoratorOptions,
                        //     decorator_id: "category_is_show",
                        //     option: {
                        //         options: [
                        //             { label: '展示', value: true },
                        //             { label: '隐藏', value: false }
                        //         ],

                        //     }

                        // },
                        // {
                        //     type: InputType.radioGroup,
                        //     label: "展示排序",
                        //     field_decorator_option: {
                        //         // rules: [{ required: true, message: "请输入正文内容" }],
                        //         initialValue: data && data!.module_sort && data!.module_sort!.category && data!.module_sort!.category!.show_sort ? data!.module_sort!.category!.show_sort : 1,
                        //     } as GetFieldDecoratorOptions,
                        //     decorator_id: "category_show_sort",
                        //     option: {
                        //         options: [
                        //             { label: '第一', value: 1 },
                        //             { label: '第二', value: 2 },
                        //             { label: '第三', value: 3 },
                        //         ],

                        //     }

                        // }
                    ]
                },
                {
                    title: "单品标识信息",
                    need_card: true,
                    extra: singleRadioGroup,
                    input_props: [
                        {
                            type: InputType.upload,
                            label: "单品图片",
                            decorator_id: "product_picture",
                            field_decorator_option: {
                                // rules: [{ required: true, message: "请输入正文内容" }],
                                initialValue: data ? data!.product_picture : [],
                            } as GetFieldDecoratorOptions,
                            form_item_props: {
                                extra: "（请上传大小为1M以内的图片）（可选）"
                            } as FormItemProps,
                            option: {
                                action: UPLOAD_URL,
                                upload_amount: 5,
                                beforeUpload: beforeUpload
                            }
                        },
                        {
                            type: InputType.select,
                            label: "产品类型",
                            decorator_id: "product_type",
                            field_decorator_option: {
                                rules: [{ required: true, message: "请选择产品类型" }],
                                initialValue: data ? data!.product_type : '',
                            } as GetFieldDecoratorOptions,
                            option: {
                                data: selectOption,
                                placeholder: "请选择产品类型"
                            }
                        },
                        {
                            type: InputType.input,
                            label: "单品名称",
                            decorator_id: "handle_name",
                            field_decorator_option: {
                                // rules: [{ required: true, message: "请输入单品名称" }],
                                initialValue: data ? data!.handle_name : '',
                            } as GetFieldDecoratorOptions,
                            option: {
                                // addonBefore: "86.168.8/QYMB",
                                placeholder: "请输入单品模板名称"
                            }
                        },
                        {
                            type: InputType.input,
                            label: "单品标识",
                            decorator_id: "handle_code",
                            field_decorator_option: {
                                // rules: [{ validator: checkCode }],
                                rules: [{ required: true, message: "请输入单品标识" }],
                                initialValue: data && data!.handle_code ? data!.handle_code!.slice(data!.handle_code!.indexOf('/') + 1) : '',
                            } as GetFieldDecoratorOptions,
                            option: {
                                addonBefore: before_handle_code ? before_handle_code : "",
                                placeholder: "请输入单品标识",
                                disabled: this.state.check_code
                            }
                        },
                        // {
                        //     type: InputType.radioGroup,
                        //     label: "是否展示",
                        //     field_decorator_option: {
                        //         // rules: [{ required: true, message: "请输入正文内容" }],
                        //         initialValue: data && data!.module_sort && data!.module_sort!.single ? data!.module_sort!.single!.is_show : true,
                        //     } as GetFieldDecoratorOptions,
                        //     decorator_id: "single_is_show",
                        //     option: {
                        //         options: [
                        //             { label: '展示', value: true },
                        //             { label: '隐藏', value: false }
                        //         ],

                        //     }

                        // },
                        // {
                        //     type: InputType.radioGroup,
                        //     label: "展示排序",
                        //     field_decorator_option: {
                        //         // rules: [{ required: true, message: "请输入正文内容" }],
                        //         initialValue: data && data!.module_sort && data!.module_sort!.single && data!.module_sort!.single!.show_sort ? data!.module_sort!.single!.show_sort : 2,
                        //     } as GetFieldDecoratorOptions,
                        //     decorator_id: "single_show_sort",
                        //     option: {
                        //         options: [
                        //             { label: '第一', value: 1 },
                        //             { label: '第二', value: 2 },
                        //             { label: '第三', value: 3 },
                        //         ],

                        //     }

                        // },
                        {
                            type: InputType.button,
                            label: "引用模版",
                            decorator_id: "stencil",
                            field_decorator_option: {
                            } as GetFieldDecoratorOptions,
                            option: {
                                name: '选择模版',
                                onClick: this.select_stencil
                            }
                        },
                        {
                            one_row_inputs: {
                                title: "自定义类目属性",
                                border: true,
                                inputs_props: [
                                    {
                                        type: InputType.customProperties,
                                        col_span: 14,
                                        decorator_id: "custom_attribute",
                                        field_decorator_option: {
                                            // rules: [{ required: true, message: "请输入正文内容" }],
                                            initialValue: data!.custom_attribute,
                                        } as GetFieldDecoratorOptions,
                                        layout: {
                                            labelCol: {
                                                xs: { span: 24 },
                                                sm: { span: 24 },
                                            },
                                            wrapperCol: {
                                                xs: { span: 24 },
                                                sm: { span: 24 },
                                            },
                                        },
                                        option: {
                                            befor_placeholder: '类目名称',
                                            after_placeholder: '请输入类目信息',
                                            type_key: 'format',
                                            before_key: 'label',
                                            after_key: 'value',
                                            // value: data!.custom_attribute,
                                            upload_action: UPLOAD_URL,
                                            upload_amount: 5,
                                            beforeUpload: beforeUpload
                                        }
                                    },
                                    {
                                        type: InputType.popover,
                                        col_span: 10,
                                        label: "参考图片",
                                        decorator_id: "picture",
                                        // default_value: "11",
                                        layout: {
                                            labelCol: {
                                                xs: { span: 24 },
                                                sm: { span: 4 },
                                            },
                                            wrapperCol: {
                                                xs: { span: 24 },
                                                sm: { span: 20 },
                                            },
                                        },
                                        option: {
                                            title: '详细图片',
                                            content: content,
                                            buttonName: '点击查看',
                                            placement: 'bottom'
                                        }
                                    },
                                ]
                            }
                        }
                    ]
                }],
            form_item_layout: formItemLayout,
            row_btn_props: {
                style: {
                    justifyContent: " center"
                }
            },
            other_btn_propps: [
                {
                    text: "返回",
                    cb: this.onClickBack
                }
            ],
            submit_btn_propps: {
                text: "预览",
                cb: this.onClickSubmit
            }
        };

        return (
            (
                // <LocaleProvider locale={zh_CN}>
                <NTDivStyle.NTDefaultDiv>
                    <Modal
                        title="请选择模版！"
                        visible={this.state.stencil_visible}
                        onOk={() => this.handleOk(formProps)}
                        onCancel={this.handleCancel}
                    >
                        <NTOperationTable
                            data_source={this.state.data_source}
                            columns_data_source={this.columns_data_source}
                            on_row_selection={this.handleRowSelect}
                            table_size='middle'
                            showHeader={true}
                            bordered={true}
                            total={this.state.total_data}
                            default_page_size={10}
                            total_pages={Math.ceil((this.state.total_data ? this.state.total_data : 0) / 10)}
                            show_footer={true}
                            page_on_click={this.pageOnCick}
                            show_size_change={this.showSizeChange}
                        />
                    </Modal>
                    <FormCreator {...edit_props} ref={(e: any) => formProps = e} />
                    {this.state.visible ? <NTModal
                        visible={this.state.visible}
                        closable={false}
                        title="预览"
                        cancelText="返回"
                        okText={"提交并生成二维码"}
                        onCancel={() => { this.setState({ visible: false, showCode: false }); }}
                        onOk={() => { this.setState({ showCode: true, }); }}
                        content={<SignPreview showCode={!this.state.showCode} data={this.state.preview_data} qr_code={this.state.src} />}
                        footer={[
                            // 定义右下角 按钮的地方 可根据需要使用 一个或者 2个按钮
                            !this.state.showCode ? <Button key="back" onClick={() => { this.setState({ visible: false, showCode: false }); }}>返回</Button> : <div />,
                            !this.state.showCode ? <Button key="submit" type="primary" onClick={this.save_build_qrCode}>
                                提交并生成二维码
                            </Button> : <Button key="back" onClick={() => { this.setState({ visible: false, showCode: false }, () => { this.props.history!.push(ROUTE_PATH.singleProductView); }); }}>返回</Button>,
                        ]}
                    /> : ''}
                    {/* </LocaleProvider> */}
                </NTDivStyle.NTDefaultDiv>
            )
        );
    }
}

/**
 * 控件：更改单品标识视图控件
 * 控制更改单品标识视图控件
 */
@addon('ChangeSingleProductView', '更改单品标识视图控件', '控制更改单品标识视图控件')
@reactControl(ChangeSingleProductView, true)
export class ChangeSingleProductViewControl extends ReactViewControl {
    /**
     * 单品标识服务
     */
    public singleProductSignService_Fac?: Ref<ISingleProductSignService>;
    /** 
     * 产品类型服务
     */
    public productTypeService_Fac?: Ref<IProductTypeService>;
    /**
     * 企业标识服务
     */
    public companyTemplateSignService_fac?: Ref<ICompanyTemplateSignService>;
    /**
     * 模版管理服务
     */
    public stencilService_Fac?: Ref<IStencilService>;
    match?: match<{ [SIGN_ID]: string }>;
}